<%= javascript_include_tag "postCommentsPage", defer: true %>
<% if @root_comment.present? && !@root_comment.decorate.super_low_quality %>
  <% title(@root_comment.title.to_s) %>
<% else %>
  <% title(t("views.comments.meta.title_root", title: @commentable.title)) %>
<% end %>

<% if @commentable %>
  <%= content_for :page_meta do %>
    <meta name="description" content="<%= @commentable.description || t("views.comments.meta.description") %>">
    <%= meta_keywords_article %>

    <meta property="og:type" content="article" />
    <meta property="og:title" content="<%= t("views.comments.meta.og.title", title: @commentable.title) %>" />
    <meta property="og:description" content="<%= @commentable.description || t("views.comments.meta.og.description", site: community_name) %>" />
    <meta property="og:site_name" content="<%= community_name %>" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
    <meta name="twitter:creator" content="@<%= @user.twitter_username %>">
    <meta name="twitter:title" content="<%= @commentable.title %>">
    <meta name="twitter:description" content="<%= @commentable.description || t("views.comments.meta.og.description", site: community_name) %>">

    <% if @root_comment.present? %>
      <link rel="canonical" href="<%= app_url(@root_comment.path) %>" />
      <meta property="og:url" content="<%= app_url(@root_comment.path) %>" />
      <meta property="og:title" content="<%= t("views.comments.meta.og.title_rel", root: truncate(strip_tags(@root_comment.processed_html), length: 50), site: community_name) %>" />
      <meta name="twitter:title" content="<%= t("views.comments.meta.og.title_rel", root: truncate(strip_tags(@root_comment.processed_html), length: 50), site: community_name) %>">
      <meta property="og:image" content="<%= Settings::General.main_social_image %>">
      <meta name="twitter:image:src" content="<%= Settings::General.main_social_image %>">
      <% if @root_comment.score < 0 || @commentable.score < 0 %>
        <meta name="googlebot" content="noindex">
        <meta name="googlebot" content="nofollow">
      <% end %>
    <% else %>
      <link rel="canonical" href="<%= app_url("#{@commentable.path}/comments") %>" />
      <meta property="og:url" content="<%= app_url("#{@commentable.path}/comments") %>" />
      <meta property="og:title" content="<%= t("views.comments.meta.og.title_root", title: @commentable.title, site: community_name) %>" />
      <meta name="twitter:title" content="<%= t("views.comments.meta.og.title_root", title: @commentable.title, site: community_name) %>">
      <% if @commentable.class.name == "Article" && @commentable.published %>
        <meta property="og:image" content="<%= Settings::General.main_social_image %>">
        <meta name="twitter:image:src" content="<%= Settings::General.main_social_image %>">
      <% end %>
    <% end %>
  <% end %>
<% end %>

<%= javascript_include_tag "commentDropdowns", defer: true %>

<div class="crayons-layout crayons-layout--limited-l gap-0" data-follow-button-container="true">
  <% if @commentable && @commentable.class.name == "Article" %>
    <span id="comment-article-indicator" data-article-id="<%= @commentable.id %>"></span>
  <% end %>

  <% unless @root_comment %>
    <article class="crayons-article crayons-card crayons-card--secondary s:mx-2 m:mx-4 -mb-1 z-0 hidden-shell-innerhidden">
      <header class="crayons-article__header">
        <% if @commentable.respond_to?(:main_image) && @commentable.main_image.present? %>
          <div class="crayons-article__cover">
            <img src="<%= cloud_cover_url(@commentable.main_image) %>" width="1000" style="background-color:<%= @commentable.main_image_background_hex_color %>;" class="crayons-article__cover__image" alt="Cover image for <%= @commentable.title %>">
          </div>
        <% end %>

        <div class="crayons-article__header__meta">
          <h1 class="fs-2xl s:fs-3xl l:fs-4xl fw-bold s:fw-heavy lh-tight mb-1">
            <%= @commentable.title %>
          </h1>
          <p class="color-base-60">
            <%= t("views.comments.parent.metadata_html",
                  name: @commentable.is_a?(PodcastEpisode) ? @commentable.podcast.name : @commentable.user.name,
                  on: tag.span(@commentable.published_at ? t("views.comments.parent.date", date: @commentable.published_at.strftime(t("time.formats.comment"))) : "", class: %w[published-at])) %>
          </p>
        </div>
      </header>

      <% if @commentable.processed_html.present? %>
        <div class="crayons-article__main">
          <div class="crayons-article__body text-styles -mt-1 m:-mt-2">
            <% if @commentable.processed_html.size < 350 %>
              <%= sanitize_rendered_markdown(@commentable.processed_html) %>
            <% else %>
              <%= truncate(sanitize(@commentable.processed_html, tags: []), length: 150) %>
              <div class="pt-6">
                <a class="crayons-btn crayons-btn--outlined" href="<%= @commentable.path %>"><%= t("views.comments.parent.read") %></a>
            <% end %>
          </div>
        </div>
      <% end %>
    </article>
  <% else %>
    <div id="response-templates-data" class="hidden"></div>
    <%= javascript_include_tag "commentsDisplay", defer: true %>
    <header class="p-2 pb-4 m:p-6 m:pb-6 crayons-card crayons-card--secondary crayons-layout__content s:mx-2 m:mx-4 -mb-1 z-0">
      <% if @commentable %>
        <h1 class="crayons-subtitle-1 mb-4">
          <%= t("views.comments.parent.subtitle_html",
                start: tag("span", { class: %w[fw-normal color-base-60] }, true),
                end: "</span>".html_safe,
                title: tag.span(@commentable.title)) %>
        </h1>
        <div class="flex">
          <a class="crayons-btn crayons-btn--outlined mr-2" href="<%= @commentable.path %>"><%= t("views.comments.parent.view") %></a>
        </div>
      <% else %>
        <%= t("views.comments.orphan.deleted") %>
      <% end %>
    </header>
  <% end %>

  <% if @root_comment.present? && (@root_comment.depth > 0 && parent = @root_comment.parent) %>
    <div class="p-2 pb-4 m:p-6 m:pb-6 crayons-card crayons-card--secondary s:mx-1 m:mx-2 -mb-2 z-0">
      <h2 class="crayons-subtitle-2 pb-2">
        <a href="<%= parent.path %>" class="crayons-link">
          <%= t("views.comments.parent.reply_html",
                start: tag("span", { class: %w[fw-normal opacity-75] }, true),
                end: "</span>".html_safe,
                title: tag.span(parent.title(150))) %>
        </a>
      </h2>
    </div>
  <% end %>

  <section
    class="crayons-card text-padding min-w-0 z-elevate"
    id="comments-container"
    data-commentable-id="<%= @commentable&.id %>"
    data-commentable-type="<%= @commentable&.class&.name %>"
    data-commentable-author-id="<%= @commentable&.user_id %>"
    data-commentable-co-author-ids="<%= @commentable&.co_author_ids&.join(",") %>">

    <% unless @root_comment %>
      <% if @discussion_lock %>
        <%= render "discussion_lock_reason" %>
      <% else %>
        <%= render "form", commentable: @commentable, commentable_type: "Article" %>
      <% end %>
    <% end %>

    <div class="comments" id="comment-trees-container">
      <% if @root_comment.present? %>
        <% cache ["comment_root-view-root_#{user_signed_in?}-#{@is_admin}", @root_comment] do %>
          <%= nested_comments(tree: Comments::Tree.for_root_comment(@root_comment, include_negative: user_signed_in?),
                              commentable: @commentable, is_view_root: true, is_admin: @is_admin) %>
        <% end %>
      <% else %>
        <% Comments::Tree.for_commentable(@commentable, include_negative: user_signed_in?).each do |comment, sub_comments| %>
          <% cache ["comment_root_#{user_signed_in?}", comment] do %>
            <%= nested_comments(tree: { comment => sub_comments }, commentable: @commentable, is_view_root: true) %>
          <% end %>
        <% end %>
      <% end %>
    </div>

    <% if @commentable&.any_comments_hidden %>
      <p class="mb-2 pt-6 fs-s align-center color-base-60">
        <%= t("views.comments.hidden.text_html", info: link_to(t("views.comments.hidden.info"), "/faq#what-does-comment-hidden-by-post-author-mean")) %>
      </p>
    <% end %>
  </section>

  <div class="py-6">
    <%= render "articles/conduct_and_abuse_actions", page: "comments_index" %>
  </div>
</div>

<div class="fullscreen-code js-fullscreen-code"></div>

<script>
  <%== TweetTag.script %>
  <%== YoutubeTag.script %>
  <%== PodcastTag.script %>
  <%== GistTag.script %>
  <%== RunkitTag.script %>
</script>
<%== TwitterTimelineTag.script %>

<%= render "comments/hide_comments_modal" %>
